<script setup lang="ts">
import {PlayStatus, useAudioPlayerStore ,useContextMenuStore} from "@/stores"
import {SongLengthToDateString} from "@/utils/date"
import LikeButton from "@/components/Controls/LikeButton.vue";
import MusicButtonListB from "@/components/Controls/MusicButtonListB.vue";
import PlayingIcon from "@/components/icons/PlayingIcon.vue";
import { computed, inject, type PropType } from 'vue'
import Logo from "@/assets/logo.png"
import PlayButtonB from '@/components/Controls/PlayButtonB.vue'
// import { eventBus } from "@/utils/eventBus"

const contextMenu = useContextMenuStore()

const props = defineProps({
  song:{
    required: true,
    type: Object as PropType<song_info>
  }
})
const playerStore = useAudioPlayerStore()
const handleDbClick =  (song: song_info) => {

  //设置音乐，参数二传是否立即播放
  handlePlay(song)
}


const handlePlay = (song: song_info) => {

  //设置音乐，参数二传是否立即播放
  playerStore.setPlayingSong(song,true)
}

const onContextMenu = (event: MouseEvent)=>{
  console.log("歌曲右键菜单")
  console.log(event,event.pageX,event.pageY)
  contextMenu.showAppContext(event.pageX,event.pageY)
}

const play = computed(():boolean=>{
  return playerStore.playingSong !== null && playerStore.playingSong.id === props.song.id
})

const playing = computed(():boolean=>{
  return playerStore.playingSong !== null && playerStore.playingSong.id === props.song.id && playerStore.status === PlayStatus.playing
})


</script>

<template>
  <dt  @dblclick="handleDbClick(song)" @contextmenu.prevent.stop="onContextMenu">
    <div class="song-name-and-artist">
      <div class="img" :class="{playing: playing}">
        <img :src="song.album_cover ? song.album_cover : Logo" :alt="song.album_name" />
        <div class="cover" @click="handlePlay(song)" :class="{ playing:playing }">
        </div>
        <PlayingIcon class="playing-icon"></PlayingIcon>
        <PlayButtonB class="playing-btn" :played="playing" :song="song"></PlayButtonB>
      </div>
      <div class="song-info" :class="{playing:play }">
        <div class="name">{{song.title}}
          <img src="@/assets/res/listVIPICon.svg" alt="">
          <img src="@/assets/res/listXQICon.svg" v-if="song.lyrics !== '' " alt="">
          <img src="@/assets/res/listMVICon.svg" alt="" />
        </div>
        <div class="artist">
          <span>{{song.album_artist_name}}</span>
        </div>
      </div>
      <div class="music-btn">
        <div class="like-btn">
          <LikeButton :liked="song.liked" :song-id="song.id"></LikeButton>
        </div>
        <span class="btn-list">
        <MusicButtonListB :played="playing" :song="song"></MusicButtonListB>
      </span>
      </div>
<!--      <PlayingIcon v-if="playerStore.playingSong && playerStore.playingSong.id === song.id && playerStore.status === PlayStatus.playing"></PlayingIcon>-->
    </div>
    <div class="song-album" :class="{playing:play }">
      <span>{{song.album_name}}</span>
    </div>
    <div class="song-length" :class="{playing:play }">{{SongLengthToDateString(song.length)}}</div>
  </dt>
</template>

<style lang="scss" scoped>


.playing{
  color: var(--color-item-select);
}

.song-name-and-artist {
  width: 433px + 200px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  position: relative;
  flex-grow: 3;
  text-overflow: ellipsis;
  word-break:break-all;
  overflow: hidden;

  .img{
    position: relative;
    width: 40px;
    height: 40px;

    img{
      width: 40px;
      height: 40px;
    }

    .playing-icon{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      margin: 0;
      display: none;
      color: white;
    }

    .playing-btn{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      margin: 0;
      color: white;
      display: none;
    }

    .cover{
      width: 40px;
      height: 40px;
      position: absolute;
      display: none;
      right: 0;
      top: 0;
      background: linear-gradient(to right,black,black);
      background-size: 100%;
      opacity: 0;

      img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 300;
        width: 20px;
        height: 20px;
        opacity: 1;
      }

    }

    .playing{
      opacity: 0.3;
      display: block;
    }

  }

  .img.playing{
    .playing-icon{
      display: flex;
    }

    .playing-btn{
      display: none;
    }

    //&:hover{
    //  .playing-icon{
    //    display: none;
    //  }
    //
    //  .playing-btn{
    //    display: block;
    //  }
    //
    //}

  }

  .song-info{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 44px;
  }



  .music-btn{
    display: flex;
    position: absolute;
    right: 20px;
  }

  .btn-list{
    display: flex;
    opacity: 0;
  }

  i{
    margin-left: 4px;
    color: #1ecf9d;
  }
}

.name{
  overflow: hidden;
  margin: 0 10px 0 12px;
  text-overflow: ellipsis;
  word-break:break-all;
  display: flex;
  align-items: center;

  img{
    margin-left: 5px;
    height: 12px;
  }

}

.artist{
  overflow: hidden;
  margin: 0 10px 0 12px;
  text-overflow: ellipsis;
  word-break:break-all;
  font-size: 12px;

  span{
    &:hover{
      color: var(--color-item-select);
      cursor: pointer;
    }
  }


}

.song-album{
  width: 276px;
  flex-grow: 1;
  overflow: hidden;
  margin: 0 10px 0 0;
  text-overflow: ellipsis;
  word-break:break-all;
  font-size: 12px;

  span{
    &:hover{
      color: var(--color-item-select);
      cursor: pointer;
    }
  }




}
.song-length{
  width: 50px;
  flex-grow: 1;
  font-size: 12px;
}

dt{
  display: flex;
  width: 100%;
  height: 58px;
  justify-content: space-between;
  font-size: 14px;
  color: black;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;

  &:hover{
    .song-name-and-artist .img .playing-icon{
      display: none;
    }

    .song-name-and-artist .img .playing-btn{
      display: block;
    }

  }

  &.active {
    .img .playing-btn{
      display: block;
    }
  }


  &:hover .img .cover,
  &.active .img .cover
  {
    opacity: 0.3;
    display: block;
  }

  &.active .btn-list,
  &:hover .btn-list
  {
    opacity: 1;
  }

}

</style>